<template>
  <div class="container">
    <Category type="美食分类">
      <img slot="center" src="@/assets/roast.png">
      <a slot="footer" href="www.baidu.com">更多美食</a>
    </Category>
    <Category type="电影分类">
      <ul slot="center">
          <li v-for="(movie, index) in movies" :key="index">{{movie}}</li>
      </ul>
      <template v-slot:footer >
        <div class="foot">
          <a href="">经典</a>
          <a href="">热门</a>
          <a href="">推荐</a>
        </div>
      </template>

    </Category>
    <Category type="旅游分类">
      <video slot="center" controls src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video>
      <div class="foot" slot="footer">
        <a href="">热门</a>
        <a href="">推荐</a>
      </div>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category'

export default {
  name: 'App',
  data() {
    return {
      foods: ['烧烤', '奶茶', '湘菜', '粤菜'],
      movies: ['《变形金刚》', '《让子弹飞》', '《西游记》', '《三国演义》'],
      travels: ['张家界', '湘西', '上海', '西安']
    }
  },
  components: { Category }
}
</script>

<style scoped>
.container, .foot {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}
img {
  width: 100%;
}
video {
  width: 100%;
}
a {
  text-align: center;
}
</style>
